<script setup lang="ts">

import { BookModel } from '@/api/webSite/response';
import { computed, defineProps } from 'vue';
const { book } = defineProps<{
  book: BookModel
}>();

const coverImg = computed(() => {
  return `background-image: url('${book.cover}');`
})

</script>

<template>
  <div class="book-card">
    <div class="content">
      <p>
        {{ book.content }}
      </p>
    </div>
    <div class="cover" :style="coverImg">
      <div class="title"> <span> {{ book.name }}</span></div>
      <div class="author"> <span> {{ book.author }}：著</span></div>
      <div class="brief">{{ book.brief }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.book-card {
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  width: 220px;
  height: 300px;
  background-color: #c3a780;
  box-shadow: 1px 1px 12px #000;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    width: 90%;
    height: 90%;
    letter-spacing: 5px;
    line-height: 30px;
    overflow: hidden;
    margin-left: 110px;

    p {
      color: black;
      text-indent: 2em;
    }
  }

  &:hover .cover {
    transition: all .5s;
    transform: rotatey(-80deg);
  }

  .cover {
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: lightgray;
    border-radius: 10px;
    transition: transform 0.5s;
    transform-origin: left center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: center;

    .title {
      flex: 1;
      font-size: 40px;
      display: flex;
      letter-spacing: 5px;
      justify-content: center;
      align-items: end;

      span {
        color: white;

      }
    }

    .author {
      flex: 1;
      margin-top: 15px;
      margin-left: 10px;
      font-size: 15px;
    }

    .brief {
      flex: 1;
      font-size: 13px;
      line-height: 20px;
      letter-spacing: 2px;
      text-indent: 2em;
      padding: 10px;
      color: white;
    }
  }
}
</style>
